<!--页面轮播组件-->

<template>
  <div class="page-carousel-comp w-h-full">
    <!--组件遮罩层，用于在设计器中显示-->
    <div v-if="shade" class="shade"></div>

    <swiper ref="pageSwiper" class="w-h-full" :options="swiperOption">
      <swiper-slide class="w-h-full" v-for="(page, index) in component.compConfigData.pages" :key="index">
        <iframe :src="$store.state.release.pageMetadata ? $PnDesigner.replaceStringSourceInteractionFields(page.url) : ''"
                width="100%"
                height="100%"
                :frameborder="0"
                scrolling="auto"/>
      </swiper-slide>
      <div v-show="component.compConfigData.showPrevAndNext"
           class="swiper-button-prev" slot="button-prev"></div>
      <div v-show="component.compConfigData.showPrevAndNext"
           class="swiper-button-next" slot="button-next"></div>
<!--      <div class="swiper-pagination" slot="pagination"></div>-->
    </swiper>

  </div>
</template>

<script>

  import 'swiper/dist/css/swiper.css'
  import { swiper, swiperSlide } from 'vue-awesome-swiper'

  import FuncCompMixin from '@/mixin/FuncCompMixin'
  import PnDesigner from '@/utils/PnDesigner'

  const _this = {
    name: 'PageCarouselComp', // 此名称必须填写，且必须与组件文件名相同\
    mixins: [FuncCompMixin],
    components: {
      swiper,
      swiperSlide
    },
    attr: {
      version: '1.1',
      configDataTemp: Object.assign({

        showPrevAndNext: true,

        autoplay: false,
        autoplayDelay: 10,
        effect: 'slide',
        direction: 'horizontal',
        speed: 300,
        // slideChangeTransitionEndCode: '',

        pages: [

        ],

      }, PnDesigner.buildFuncCompGlobalField())
    },
    data() {
      return {

      }
    },
    mounted() {
      this.init();
    },
    methods: {
      init () { // 组价初始化函数，函数名必须使用init，不可更改
        this.initDatasource(() => {
          this.runCustomGlobalJsCode()
        }, (result) => {
          this.runCustomGlobalJsCode()
        });
      }
    },
    computed: {
      swiper () {
        return this.$refs.pageSwiper.swiper
      },
      swiperOption () {
        let _this = this
        let option = {
          slidesPerView: 1, // 设置同时显示的slides数量
          spaceBetween: 30, // slide之间的距离
          direction: this.component.compConfigData.direction ? this.component.compConfigData.direction: 'horizontal',
          speed: this.component.compConfigData.speed ? this.component.compConfigData.speed: 300,
          loop: true,
          effect: this.component.compConfigData.effect,
          pagination: {
            el: '.swiper-pagination',
            clickable: true
          },
          navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev'
          },
          // on: {
          //   slideChangeTransitionEnd: function () {
          //     let activeIndex = this.activeIndex
          //     if (_this.$store.state.release.pageMetadata) {
          //       eval(_this.component.compConfigData.slideChangeTransitionEndCode)
          //     }
          //   },
          // }
        };
        if (this.component.compConfigData.autoplay) {
          option.autoplay = {
            delay: this.component.compConfigData.autoplayDelay * 1000,
            disableOnInteraction: false
          }
        }
        return option
      }
    }
  };

  export default _this
</script>

<style scoped>

</style>
